import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { FaEye, FaMicroscope, FaHeartbeat } from 'react-icons/fa';
import '../css/ReadMore.css';
import DashboardLayout from '../components/DashboardLayout';

const ReadMore = () => {
  const navigate = useNavigate();
  const [feedback, setFeedback] = useState('');

  const handleStartDetection = () => {
    navigate('/upload');
  };

  const handleFeedbackSubmit = () => {
    if (feedback.trim()) {
      alert('感谢您的反馈：\n' + feedback);
      setFeedback('');
    } else {
      alert('请输入反馈内容');
    }
  };

  return (
    <DashboardLayout>
      <div className="read-more-container">
        <header className="read-more-header">
          <h1>眼科疾病 · 深入了解</h1>
          <p>借助AI技术，守护每一位用户的眼健康</p>
        </header>

        <section className="read-more-section">
          <h2><FaEye /> 平台目标</h2>
          <p>
            通过人工智能辅助识别眼底图像，帮助用户进行眼科疾病的早期筛查，提高诊断效率与准确率。
          </p>
        </section>

        <section className="read-more-section">
          <h2><FaMicroscope /> 可检测的眼部疾病</h2>
          <ul>
            <li>年龄相关性黄斑变性</li>
            <li>白内障</li>
            <li>糖尿病</li>
            <li>青光眼</li>
            <li>高血压</li>
            <li>病理性近视</li>
            <li>其他</li>
          </ul>
        </section>

        <section className="read-more-section">
          <h2><FaHeartbeat /> 核心功能</h2>
          <ul>
            <li>上传眼底图像</li>
            <li>疾病风险识别</li>
            <li>生成检测报告</li>
          </ul>
        </section>

        <div className="read-more-footer">
          <button className="detect-button" onClick={handleStartDetection}>
            立即开始检测
          </button>
        </div>
      </div>
    </DashboardLayout>
  );
};

export default ReadMore;
